@{
ViewData["Title"]="购物车";
var user=ViewBag.User;
var scList=ViewBag.ShopCarList;
}
@section CustomCss{
<style>
  .img-shop-car {
    width: 48px;
    height: 48px;
  }
</style>
}
<div class="row">
  <div class="col-10 offset-1">
    <table class="table table-hover table-striped caption-top">
      <caption>郭双莹的购物小车</caption>
      <thead>
        <tr>
          <th style="width: 40px;">
            #
          </th>
          <th style="width: 100px;" class="text-center">图片</th>
          <th>商品名称</th>
          <th class="text-end">当前价格</th>
          <th class="text-end" style="width: 160px;">数量</th>
          <th class="text-end">
            小计
          </th>
          <th class="text-center">操作</th>
        </tr>
      </thead>
      <tbody>
        @foreach(var sc in scList){
        <tr>
          <td class="align-middle text-center">
            <div class="form-check">
              <input class="form-check-input check-single" type="checkbox" data-product-id="@sc.ProductId"
                data-price="@sc.OwnProduct.Price">
              <label class="form-check-label visually-hidden"></label>
            </div>
          </td>
          <td class="align-middle text-center">
            <img src="/upload/@sc.OwnProduct.Photo" class="img-thumbnail img-shop-car">
          </td>
          <td class="align-middle">@sc.OwnProduct.ProductName</td>
          <td class="text-end align-middle">$@sc.OwnProduct.Price</td>
          <td class="align-middle">
            <input type="number" class="form-control text-end input-quantity" value="0" min="0" max="100" />

          </td>
          <td class="align-middle text-end">
            $<span class="span-amount-part">5.00</span>
          </td>
          <td class="align-middle text-center">
            <button type="button" class="btn btn-warning btn-remove" data-product-id="@sc.ProductId"
              data-product-name="@sc.OwnProduct.ProductName">
              <i class="bi bi-trash3"></i>
            </button>
          </td>
        </tr>
        }
      </tbody>
      <tfoot>
        <tr>
          <td>
            &nbsp;
          </td>
          <td colspan="4" class="align-middle text-end">总计: &nbsp;</td>
          <td class="align-middle text-end text-danger">
            $<span id="span-amount">0.00</span>
          </td>
          <td class="align-middle text-center">
            <button type="button" class="btn btn-danger " data-bs-toggle="modal" data-bs-target="#modal-take-info">
              <i class="bi bi-patch-check"></i>&nbsp;下订单
            </button>
          </td>

        </tr>
      </tfoot>
    </table>
  </div>
</div>

@section CustomModal{
<div class="modal" tabindex="-1" id="modal-take-info">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">请输入收货人信息</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3 row">
            <label for="input-take-name" class="col-sm-3 col-form-label">姓名</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="input-take-name" value="">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="input-take-phone" class="col-sm-3 col-form-label">电话</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="input-take-phone" value="">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="input-take-address" class="col-sm-3 col-form-label">地址</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="input-take-address" value="">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button id="btn-order-yes" type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
      </div>
    </div>
  </div>
</div>
}

@section CustomScript{
<script>
  const handleRemove = function () {
    let obj = $(this);
    let message = `将要移除${obj.data('product-name')},请再次确认!`
    customConfirm(message, () => {


      $.ajax({
        type: "delete",
        url: `/shopcar/${obj.data("product-id")}`,
        success: function (response) {
          customeAlert(response, () => {
            if (response.code == 200) location.reload();
          });
        }
      });
    })
  }

  const handleAmountPart = function () {
    let obj = $(this);
    let checkObj = obj.closest("tr").find(".check-single");
    let spanObj = obj.closest("tr").find(".span-amount-part");

    checkObj.prop("checked", obj.val() > 0);
    spanObj.text((obj.val() * checkObj.data("price")).toFixed(2));
    handleAmount();
  }

  const handleAmount = () => {
    let checks = $(".check-single:checked");
    let amount = 0;
    checks.each((index, el) => {
      let obj = $(el);
      let inputObj = obj.closest("tr").find(".input-quantity");
      amount += obj.data("price") * inputObj.val();
    })
    $("#span-amount").text(amount.toFixed(2));
  }

  const handleAddOrder = () => {
    let data = {
      order: {
        takeAddress: $("#input-take-address").val(),
        takeName: $("#input-take-name").val(),
        takePhone: $("#input-take-phone").val()
      },
      details: []
    };

    $(".check-single:checked").each((index, el) => {
      let obj = $(el);
      data.details.push({
        productId: obj.data("product-id") * 1,
        quantity: obj.closest("tr").find(".input-quantity").val(),
        unitPrice: obj.data("price") * 1
      })
    })

    $.ajax({
      type: "post",
      url: "/order",
      contentType: "application/json",
      data: JSON.stringify(data),
      success: function (response) {
        customAlert(response, () => {
          if (response.code == 200) location.href = "/order"
        })
      }
    });
  }

  $(document).ready(function () {
    $(".btn-remove").on("click", handleRemove);
    $(".input-quantity").on("change", handleAmountPart);
    $(".check-single").on("click", handleAmount);
    $("#btn-order-yes").on("click", handleAddOrder);
    $("#modal-take-info").on("show.bs.modal",function(){
      $(this).find("form").trigger("reset");
    })
    $("#check-all").on("click",handleCheckAll);
  });
</script>
}
